<template>
  <AppLayout>
    <view class="module">
      <view class="address-inputs">
        <view class="input-item">
          <text>收货人</text>
          <view>
            <input type="text" placeholder="请输入收货人姓名"/>
          </view>
        </view>
        <view class="input-item">
          <text>手机号码</text>
          <view>
            <input type="number" maxlength="11" placeholder="请输入收货人手机号"/>
          </view>
        </view>
        <view class="input-item">
          <text>所在地区</text>
          <view class="area-input">
            <input type="text" placeholder="省市区县、乡镇等"/>
            <view><we-icon type="icon-locationfill" top="2rpx" gap-right="5rpx" theme="grey"/>定位</view>
          </view>
        </view>
        <view class="input-item">
          <text>详细地址</text>
          <view>
            <input type="text" placeholder="街道、楼牌号等"/>
          </view>
        </view>
      </view>
    </view>
    <view class="module">
      <view class="input-item default-config">
        <view class="label">
          <text>设置默认地址</text>
          <text>提醒：每次下单会默认推荐使用改地址</text>
        </view>
        <view class="input">
          <switch></switch>
        </view>
      </view>
    </view>
    <view class="footer">
      <button>保&nbsp;&nbsp;&nbsp;&nbsp;存</button>
    </view>
  </AppLayout>
</template>

<style scoped lang="scss">
  @import "../../../style/variables";
  $button-create-height: 80rpx;
  $footer-height: $button-create-height + $gap * 2;
  // 模块
  .module {
    margin-bottom: $gap;
  }
  // 地址输入
  .address-inputs {
    background-color: $background-color-module;
    padding: 0 $gap-middle;
  }
  // 输入项
  .input-item {
    display: flex;
    line-height: 100rpx;
    border-bottom: 1px solid #f7f7f7;
    text {
      width: 180rpx;
    }
    & > view {
      width: 100%;
      display: flex;
      input {
        width: 100%;
        height: 100rpx;
      }
    }
    // 地区
    .area-input {
      input {
        width: 100%;
      }
      & > view {
        width: 100rpx;
        flex-shrink: 0;
        color: #777;
        text-align: right;
      }
    }
  }
  // 设为默认
  .default-config {
    background-color: $background-color-module;
    padding: $gap $gap-middle;
    .label {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      text {
        width: 100%;
        line-height: 46rpx;
        // 提醒
        &:last-of-type {
          color: #999;
          font-size: $font-size-mini;
        }
      }
    }
    .input {
      width: 100rpx;
      flex-shrink: 0;
      // 默认地址开启状态
      /deep/ .uni-switch-input-checked {
        background-color: $primary-color !important;
        border-color: $primary-color !important;
      }
    }
  }
  // 底部操作
  .footer {
    background-color: $background-color-module;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: $footer-height;
    line-height: $footer-height;
    padding: $gap-mini $gap-middle;
    box-sizing: border-box;
    button {
      height: $button-create-height;
      line-height: $button-create-height;
      border-radius: $button-create-height/2;
      border: 0;
      background-color: $primary-color;
      color: $font-color-white;
    }
  }
</style>
